<template>
  <div>
    <!-- 头部 -->
    <section class="shortcut w">
      <div>
        <div class="fl">
          <ul>
            <li class="Logo"><router-link
              :to="{path: '/', name: 'user'}"
            >书城Logo</router-link></li>
            <li><router-link
              v-if="userId"
              :to="{path: '/shoppingCar', name: 'userShopCar'}"
            >我的购物车</router-link> &nbsp; </li>
            <li><router-link
              v-if="userId"
              :to="{path: '/booksOrder', name: 'userBookOrder'}"
            >订单管理</router-link> &nbsp; </li>
          </ul>
        </div>
      </div>
    </section>
    <!-- 主体 -->
    <div class="w bookIntro">
      <div class="cover fl">
        <div
          class="demo-image"
          :style="{
            width: '430px',
            height: '430px',
            border: '1px solid #ddd',
            borderRadius: '4px'
          }"
        >
          <div class="block" prop="post">
            <el-image
              style="width: 400px; height: 400px; margin: 15px 15px"
              :src="post.cover"
            />
          </div>
        </div>
      </div>
      <div class="Info fr" style="width: 65%">
        <el-card class="box-card" style="height: 450px;box-shadow: none;border: none">
          <div :key="post.id" prop="post" class="text item">
            <h3>{{ '商品编号: ' + post.id }}</h3>
            <p>单价:</p>
            <p style="color: red;font-weight: bold;font-size: 32px;margin:0 0 20px">{{ '￥ ' + post.price }}</p>
            <h2>{{ '书名: ' + post.bookName }}</h2>
            <p>{{ '作者: ' + post.author }}</p>
            <p>{{ '出版社: ' + post.press }}</p>
            <p>{{ '出版时间: ' + post.publishingTime }}</p>
            <p>{{ '印刷时间: ' + post.printingTime }}</p>
          </div>
        </el-card>
        <div class="shopping">
          <el-input-number
            v-model="num"
            :min="1"
            :max="100"
            label="描述文字"
            :style="{marginTop: '50px',marginLeft: '30px'}"
            @change="handleChange"
          />
          <br>
          <el-button type="success" :plain="true" style="margin: 40px 30px;" @click="addCar()">加入购物车</el-button>
          <el-button type="success" plain>购买</el-button>
        </div>
        <div
          class="fl"
          :style="{
            position: 'relative',
            bottom: '0',
            marginTop: '100px',
            width: '100%',
            height: '1px'
          }"
        />
      </div>
    </div>
  </div>
</template>

<script>
import userApi from '@/api/user'

export default {
  data() {
    return {
      num: 1,
      userId: 0,
      post: {
        cover: 'https://hxx-gulixy.oss-cn-beijing.aliyuncs.com/2021/04/02/964593447b434a7c82e7e1548d2d7ec8hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'
      }
    }
  },
  computed: {
    // post() {
    //   return this.$store.state.post
    // }
  },
  created: async function() {
    // 接受参数
    if (JSON.stringify(this.$route.query) !== '{}') {
      this.userId = window.sessionStorage.getItem('token')
      await userApi.getBookById(this.$route.query.id).then(resp => {
        this.post = resp.data.data[this.$route.query.id]
      }, err => {
        console.log(err)
      })
    } else {
      this.$message({
        message: '加载错误！',
        type: 'error'
      })
    }
  },
  methods: {
    handleChange(value) {
      // console.log(value)
    },
    addCar() {
      if (this.userId) {
        userApi.addCart(this.userId, {
          'bookId': this.userId,
          'bookNumber': this.num
        }).then(resp => {
          this.$message({
            message: '加入购物车成功！',
            type: 'success'
          }, err => {
            console.log(err)
          })
        })
      } else {
        this.$router.push({
          // 若未登录  不能添加到购物车  推送至登陆界面
          path: '/userLogin',
          duration: 2000
        })
        this.$message({
          message: '请登录！',
          type: 'warning',
          duration: 2000
        }, err => {
          console.log(err)
        })
      }
    }
  }

}
</script>

<style scoped>
.bookIntro {
    margin-top: 25px;
}
.Info p {
    margin-top: 30px;
    font-size: 16px;
}
.shopping {
    height: 200px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
}
</style>
